<style lang="less">
.page-templets{
    .main .main-form{
        width: 54%;
    }

    .text-help{
        margin: 0;
        font-size: 12px;
        line-height: 1;
        color: #B4B4B4;
    }

    .label-add{
        margin-top: 5px;
        border:1px #B4B4B4 solid;
    }
    .label-edit-header {
        padding: 10px;
        display: inline-block;
    }
    .label-edit-input {
        margin-left: 10px;
        width: 250px;
    }
    .keyword-button {
         margin: 5px;
    }
    .keyword-button-show:hover {
        background-color: #00dbff
    }
    .keyword-button-delete {
        top: -15px;
        position: relative;
        right: -20px;
        color: red;
    }
    
}
.p_1 { 
    line-height: 2px;
    width: 18px; 
    font-size: 18px; 
    font-weight: 500;
    word-wrap: break-word; 
    transform:rotate(-90deg);
    -ms-transform:rotate(-90deg); /* Internet Explorer 9*/
    -moz-transform:rotate(-90deg); /* Firefox */
    -webkit-transform:rotate(-90deg); /* Safari 和 Chrome */
    -o-transform:rotate(-90deg); /* Opera */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
} 
.print_font {
    padding-top: 90%;
    padding-left: 45%;
}
</style>
<template>
    <div class="main page-font">
        <div class="main-header">
            <el-breadcrumb>
                <el-breadcrumb-item :to="{ path: '/tickets' }">票券管理</el-breadcrumb-item>
                <el-breadcrumb-item>{{itemModel.id ? '修改票券生成' : '票券生成'}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <el-form class="main-form" label-width="100px" :model="itemModel" @submit.native.prevent="save()">
            <el-form-item label="票券大类">
                <el-select v-model="itemModel.parent_id" @change="parentChange">
                    <el-option
                        v-for="item in parents"
                        :label="item.name"
                        :value="item.id"
                        :key="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="票券类型">
                <el-select v-model="itemModel.type_id" @change="getNum">
                    <el-option
                        v-for="item in ticketSel"
                        :label="item.name"
                        :value="item.id"
                        :key="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <!-- <el-form-item v-for="attr in attrs" v-bind:key="attr.id" :label="attr.name">
                <el-checkbox-group v-model="attr.values" @change="onAttrChange(attr)">
                    <el-checkbox v-for="item in attr.items" v-bind:key="item.id" :label="item">{{item.name}}</el-checkbox>
                </el-checkbox-group>
            </el-form-item> -->
            <!-- <el-form-item label="有效开始时间">
                <el-date-picker type="date" v-model="itemModel.start_time"></el-date-picker>
                <span class="tips" style="margin-left:.6em;color:#999">* 票券可使用开始时间</span>
            </el-form-item>
            <el-form-item label="有效截止时间">
                <el-date-picker type="date" v-model="itemModel.end_time"></el-date-picker>
                <span class="tips" style="margin-left:.6em;color:#999">* 票券可使用截止时间</span>
            </el-form-item> -->
            <el-form-item label="生成数量">
                <el-input-number v-model="itemModel.num" :min="1" @change="endNoChanage"></el-input-number>
            </el-form-item>

            <el-form-item label="票券号起">
                <el-input v-model="itemModel.start_no" disabled></el-input>
            </el-form-item>
            <el-form-item label="票券号起终">
                <el-input v-model="itemModel.end_no" disabled></el-input>
            </el-form-item>
             <el-form-item label="条形码高">
                <el-input v-model="height"></el-input>
            </el-form-item>
             <el-form-item label="条形码宽">
                <el-input v-model="width"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button native-type="submit" type="primary" :loading="!itemModel.$resolved">生成</el-button>
                 <!-- <el-button native-type="submit" type="primary" :loading="!itemModel.$resolved">生成并打印</el-button> -->
            </el-form-item>
        </el-form>
                <el-table
            border
            :data="tickets"
        >
            <el-table-column sortable="custom" prop="id" label="ID" width="80"></el-table-column>
            <el-table-column prop="ticket_no" label="票券编号"></el-table-column>
            <el-table-column label="票券类型" inline-template>
                <div>
                    <span>{{ row.parent ? row.parent.name : '-'}}</span>
                </div>
            </el-table-column>
            <el-table-column label="生成时间" inline-template>
                <div>
                    <span>{{ row.created_at | date('YYYY-MM-DD HH:mm')}}</span>
                </div>
            </el-table-column>
        </el-table>
         <el-row>
            <el-button class="confirm-btn" :loading="loading" native-type="submit" type="primary" @click="print">打印</el-button>
        </el-row>
        <div id="printPage" v-show="false">
            <div v-for="(item, index) in tickets" v-bind:key="item.id" :id="'page' + index" style="text-align:center;page-break-after:always;">
                <barcode :height="height" :width="width" tag="img" :value="item.ticket_no" :options="{ displayValue: true, fontSize: 32 }"></barcode>
            </div>
        </div>
    </div>
</template>

<script>
import lodash from 'lodash';
import ItemController from '../controllers/item';

import Ticket from '../models/ticket';
import AttributeModel from '../models/attribute';
import TypeModel from '../models/type';

import JsBarcode from 'jsbarcode'

export default new ItemController({
    data() {
        return {
           itemModel: new Ticket({
                parent_id: 0,
                type_id: 0,
                num: '',
                weekdays: 0,
                price: 0,
                start_no: '',
                end_no: ''
            }),
            width: '65%',
            height: '115%',
            margin: 0,
            attrs: [],
            loading: false,
            tickets: [],
            parents: [],
            ticketSel: [],
        };
    },
    methods: {
        beforeLoadModel() {
            return Promise.all([
                // this.loadGrands(),
                this.loadParents()
            ]);
        },
        loadParents() {
            return TypeModel.query({
                parent_id: 0
            })
            .$promise
            .then(types => {
                this.parents = types.items;
                this.itemModel.parent_id = types.items[0].id;
            });
        },
        loadTickets(parent_id) {
            return TypeModel.query({
                parent_id: parent_id,
            })
            .$promise
            .then(types => {
                this.ticketSel = types.items;
                this.itemModel.type_id = types.items[0].id;
                this.getNum();
            });
        },
        getNum() {
            return Ticket.query({
                type_id: this.itemModel.type_id,
            })
            .$promise
            .then(data => {
                this.itemModel.start_no = data.pagination.total + 1 + 10000;
                this.itemModel.end_no = data.pagination.total + 1 + 10000;
            })
        },
        endNoChanage(val) {
            // if(!this.itemModel.start_no) {
            //     this.$message.info('请填写票券起始编号')
            // }
            // else {
            //     const start = +this.itemModel.start_no.replace(/[^0-9]/ig, '');
            //     const end = +this.itemModel.end_no.replace(/[^0-9]/ig, '');
            //     this.itemModel.num = (end - start) + 1;
            //     if(this.itemModel.num < 1) {
            //         this.itemModel.num = 0;
            //     }
            // } 
            this.itemModel.end_no = parseInt(this.itemModel.start_no) + val - 1;
        },
        save() {
            // window.print('http://img5.imgtn.bdimg.com/it/u=415293130,2419074865&fm=27&gp=0.jpg');
            // return;
            const itemModel = this.itemModel;
            if(this.itemModel.num < 1) {
                this.$message.info('请输入大于起始编号的终止编号');
                return;
            }
            this.$confirm('确认生成')
            .then(() => {
                return itemModel.$save(itemModel)
                .then(data => {
                    this.tickets = data.tickets
                    this.itemModel.num = 0;
                    return Promise.all([
                       this.loadParents(),
                    ]);
                });
            });
        },
        parentChange() {
            this.type_id = '';
        },
        print() {
            var head_str = "<html><head><title></title></head><body>"; //先生成头部
            var foot_str = "</body></html>"; //生成尾部
            var older = document.body.innerHTML;
            // document.body.style.position='fixed';
            // document.body.style.left='0';
            // document.body.style.top='0';
            // document.body.style.height='100%';
            // document.body.style.width='100%';

            // document.body.style.zIndex='100000';
            // document.body.style.overflow='auto';

            var new_str = document.getElementById('printPage').innerHTML; //获取指定打印区域
            var old_str = document.body.innerHTML; //获得原本页面的代码
            document.body.innerHTML = head_str + new_str + foot_str; //构建新网页
            window.print(); //打印刚才新建的网页
            document.body.innerHTML = older; 
            window.location.reload();
            //将网页还原
            return false;
        //     var printStr = "<html><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8'></head><body >";
        //     var content = "";

        //     for(let i = 0; i < this.tickets.length; i++) {
        //         const page = document.getElementById('page'+ i);
        //         if(page) {
        //             content = content + page.innerHTML;  
        //         }
        //     }
        //      //获取需要打印的页面元素 ，page1元素设置样式page-break-after:always，意思是从下一行开始分割。
        //    debugger;
        //     printStr = printStr + content + "</body></html>";
        //     // var pwin = window.open("Print.htm", "print"); //如果是本地测试，需要先新建Print.htm，如果是在域中使用，则不需要
        //     document.write(printStr);
        //     document.close();                   //这句很重要，没有就无法实现  
        //     window.print();
        }
    },
    watch: {
        'itemModel.parent_id': {
            deep: true,
            handler(newVal, oladVal) {
                console.log(newVal, oladVal)
                return this.loadTickets(newVal);
            }
        },
    }
});
</script>
